<template>
  <!-- 加减组件 -->
  <div class="goods-control">
    <transition name="move">
      <div
        class="control-plus"
        @click.stop.prevent="decreseCount"
        v-show="food.count> 0 && !food.ProductProperty"
      ></div>
    </transition>
    <div class="control-count" v-show="food.count && !food.ProductProperty">{{food.count}}</div>
    <div class="control-add" @click.stop.prevent="addCart" v-show="!food.ProductProperty"></div>
    <div class="selectSku" v-show="food.ProductProperty">选规格</div>
  </div>
</template>
<script>
import Vue from "vue";
import { eventBus } from "../eventBus";
export default {
  props: {
    food: {
      type: Object
    }
  },
  methods: {
    addCart(event) {
      if (!event._constructed) {
        //避免PC发生两次点击事件
        return;
      }
      if (!this.food.count) {
        Vue.set(this.food, "count", 1); //添加属性 能被检测导数据变化
      } else {
        this.food.count++;
      }
      // 优化体验，异步传递当前点击文档节点
      this.$nextTick(() => {
        eventBus.$emit("add-cart", event.target);
      });
      // this.$emit("add-cart", event);
    },
    decreseCount() {
      if (!event._constructed) {
        //避免PC发生两次点击事件
        return;
      }
      if (this.food.count) {
        if (this.food.count < 0) {
          this.food.count = 0;
          return;
        }
        this.food.count--;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.goods-control {
  position: absolute;
  width: 1.4rem;
  height: 0.4rem;
  right: 0.3rem;
  bottom: 0.25rem;
  .control-plus {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    left: 0;
    top: 0;
    background: url(~img/icon_kaidan_reduce.png) 0 0 no-repeat;
    background-size: 100% 100%;
    transition: all 0.4s linear;
    &.move-enter-active,
    &.move-leave-active {
      opacity: 0;
      transform: translate3d(24px, 0, 0) rotate(360deg);
    }
  }
  .control-count {
    text-align: center;
    position: absolute;
    left: 0.4rem;
    top: 0;
    width: 0.58rem;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.36rem;
    color: #333333;
  }
  .control-add {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    right: 0;
    top: 0;
    background: url(~img/icon_kaidan_add.png) 0 0 no-repeat;
    background-size: 100% 100%;
  }
  .selectSku {
    float: right;
    width: 1.08rem;
    height: 0.46rem;
    border-radius: 0.22rem;
    line-height: 0.46rem;
    text-align: center;
    box-shadow: 0 0 1px #e94f61 inset;
    color: #ff5355;
  }
}
</style>
